/**
 * 菜单图标颜色配置
 * 根据菜单文本自动设置图标颜色
 */

// 颜色映射表
const COLOR_MAP: Record<string, string> = {
  仪表盘: '#1890ff', // 蓝色
  分析页: '#1890ff', // 蓝色
  工作台: '#1890ff', // 蓝色
  系统管理: '#8c8c8c', // 灰色
  客户端管理: '#52c41a', // 绿色
  用户管理: '#722ed1', // 紫色
  角色管理: '#13c2c2', // 青色
  菜单管理: '#fa8c16', // 橙色
  权限管理: '#f5222d', // 红色
  工作流管理: '#1890ff', // 蓝色
  流程模型: '#722ed1', // 紫色
  流程定义: '#fa8c16', // 橙色
  流程实例: '#52c41a', // 绿色
  待办任务: '#faad14', // 金色
  已办任务: '#52c41a', // 绿色
  流程监控: '#f5222d', // 红色
  开发工具: '#fa8c16', // 橙色
  图标库: '#eb2f96', // 粉色
  API文档: '#13c2c2', // 青色
};

/**
 * 设置单个图标的颜色
 */
function setIconColor(svg: SVGElement, color: string) {
  svg.style.setProperty('color', color, 'important');
  svg.style.setProperty('fill', color, 'important');
}

/**
 * 应用图标颜色
 */
function applyIconColors() {
  const items = document.querySelectorAll('.vben-menu-item, .vben-sub-menu-content');

  items.forEach((item) => {
    const text = item.textContent?.trim() || '';
    const svg = item.querySelector('svg.vben-menu__icon') as SVGElement;

    if (svg) {
      // 遍历颜色映射表，找到匹配的菜单项
      for (const [key, color] of Object.entries(COLOR_MAP)) {
        if (text.includes(key)) {
          setIconColor(svg, color);
          break;
        }
      }
    }
  });
}

/**
 * 监听 DOM 变化，自动应用颜色
 */
function observeMenuChanges() {
  // 初始应用
  applyIconColors();

  // 创建 MutationObserver 监听菜单变化
  const observer = new MutationObserver(() => {
    applyIconColors();
  });

  // 监听菜单容器的变化
  const menuContainer = document.querySelector('.vben-menu');
  if (menuContainer) {
    observer.observe(menuContainer, {
      childList: true,
      subtree: true,
    });
  }

  // 监听路由变化（激活状态改变）
  window.addEventListener('hashchange', applyIconColors);
  window.addEventListener('popstate', applyIconColors);
}

/**
 * 初始化菜单图标颜色
 */
export function initMenuIconColors() {
  // 等待 DOM 加载完成
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', observeMenuChanges);
  } else {
    // DOM 已经加载完成，延迟执行以确保菜单已渲染
    setTimeout(observeMenuChanges, 100);
  }

  // 监听 Vue 路由变化
  setTimeout(() => {
    const app = document.querySelector('#app');
    if (app) {
      const observer = new MutationObserver(() => {
        applyIconColors();
      });
      observer.observe(app, {
        childList: true,
        subtree: true,
      });
    }
  }, 500);
}

/**
 * 手动触发颜色应用（用于调试）
 */
export function refreshIconColors() {
  applyIconColors();
}

